<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css">
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="${base!}/assets/front/h5/css/app.css"/>-->
    <style>

        .h3{
            margin-right: 10px;
            font-size: 22px;
            color: #0a0a0a;
            margin-bottom: 10px;
            font-family: Verdana, "PingFangSC", arial, 微软雅黑, 宋体;
        }
        .rcm-hd{
            padding: 55px 10px;
            border-bottom: 1px solid #e3e3e3;
            position: relative;
            background: #FFFFFF;
        }
        .price{
            font-size: 13px;
            color: #0a0a0a;
            margin-top: 15px;
        }


        .spanPrice{
            font-size: 10px;
            color: #7f7f7f;
            margin-right: 10px;
            text-decoration: line-through;
        }
        .spanPrice2{
            font-size: 20px;
            color: #f75545;
            margin-right: 110px;
        }
        .detailTab{
            margin-top: 0px;
            background: #fff;
        }
        .detailHD{
            height: 30px;
            line-height: 28px;
            display: flex;
            justify-content: space-around;
            text-align: center;
            border-bottom: 0px solid #e3e3e3;
            margin-bottom: 10px;
        }
        .bar{
            position: absolute;
            right: 0px;
            left: 0;
            z-index: 10;
            font-family: "微软雅黑";
            height: 70px;
            padding-right: 10px;
            padding-left: 10px;
            background-color: #fff;
            border-bottom: 1px solid #e8e8e8;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .bar-tab{
            bottom: 24px;
            width: 100%;
            height: 1.8rem;
            padding: 0;
            table-layout: fixed;
            border-top: 0px solid #d9d9d9;
            border-left: 0;
            border-bottom: 0;
            z-index: 9000;
            transition-duration: 400ms;
        }
        .bushFooter{
            display: flex;
            justify-content: space-between;
            padding: 0 10px;

        }
        .bushFooter .btns{
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        .bushFooter a.green {
            background: rgb(56,206,204);;
        }

        .bushFooter a {
            background: rgb(56,206,204);;
            display: inline-block;
            width: 40%;
            height: 36px;
            line-height: 36px;
            color: #ffffff;
            text-align: center;
            float: left;
            font-size: 20px;
            border-radius: 100px;
            margin: 10px 10px;
        }
        .a {
            color: #525252;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
        }
        .bar-tab ~ .content, .bar-tab ~ .page .content {
            bottom: 50px;
        }

        .content {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }
        .item img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body style="background-color: #ffffff;">
<div style="" id="product">
<footer class="bar bar-tab bushFooter" style="background: white;">
    <div class="btns" >

        <a href="#" onclick="addCart()" class="orange">加入购物车</a>
        <a href="#" onclick="fastBuy()" class="red" style="background: red">立即购买</a>



    </div>
</footer>
<div class="content m-rushBuyMain" style="background: white;">
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">商品详情</h1>
</header>

<div id="slider" class="mui-slider" style="    height: 300px;" >
    <div class="mui-slider-group mui-slider-loop">
        <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate" >
            <a href="#">
                <img :src="product.imgList">
            </a>
        </div>
        <!-- 第一张 -->
        <div class="mui-slider-item" v-for="img in product.imageList" :key="img.id">
            <a href="#">
                <img :src="img.imgAlbum">
            </a>
        </div>
        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
                <img :src="product.imgList">
            </a>
        </div>
    </div>
    <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
    </div>
</div>
    <div class="rcm-hd">

        <div class="h3" style="">{{product.name}}</div>
        <input type="hidden" id="stock" :value="product.stock">
        <div class="price">
            现价：<span class="spanPrice2"><i>￥</i>{{product.price}}</span>厂商指导价：<span class="spanPrice"><i>￥</i>{{product.marketPrice}}</span>
        </div>
        <div style="display: inline" >
            <div style="float: left;width: 35%" class="price" >
                数量：
            </div>
            <div style="float: right;width: 35%;left: -55%;margin-top: 10px;" class="mui-numbox" data-numbox-min='1' data-numbox-max='1000'>
                <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                <input id="productNum" class="mui-input-numbox" type="number" value="1" />
                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>

            </div>
        </div>

  </div>

<div style="background: #f9f7f8;">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell" v-on:click="look">
            <a class="mui-navigate-right" >
               宝贝评价({{feedCount}})<span style="float:right;padding-right: 20px;color: #ff9908;">查看全部</span>
            </a>
        </li>
    </ul>
    <div class="detailTab">
        <div class="detailHD">商品详情</div>
        <div class="bd">
            <div class="item" v-html="product.wapNote">
                {{product.wapNote}}
            </div>
        </div>
    </div>
</div>
</div>
</div>
<script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
<script type="text/javascript" src="${base!}/assets/decorate/pc/decoratecommon/js/layer/mobile/layer.js" ></script>
<script type="text/javascript" charset="utf-8">
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    var vue = new Vue({
        el: '#product',
        data: {
            product: [],
            feedCount:0
        },
        created:function () {   //实例初始化创建完成执行

            this.ProductDetail();     //调用自身方法
            this.feedbackCount();

        },
        methods:{              //定义封装方法
            //获取列表
            ProductDetail:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/product/getProductDetail.html",
                    dataType:"JSON",
                    data:{
                        id:'${id!}'
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.product = d;
                            var slider = mui("#slider");
                            slider.slider({
                                interval: 5000
                            });
                        } else {

                        }
                    }
                });

            },
            feedbackCount:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/feedback/feedbackCount",
                    dataType:"JSON",
                    data:{
                        goodsId:'${id!}'
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.feedCount =d;
                        } else {

                        }
                    }
                });
            },
            look:function () {
                 window.location.href="${base!}/open/h5/feedback/goProductFeedback?goodsId=${id!}"
            }
        },
        watch:{     //监听器
            // carModel:function () {
            //     this.getProvince();
            // }
        }

    });
    function fastBuy() {
        var num = $("#productNum").val();
        var array = [];
        var pdata = {};
        pdata.num = num;
        var pNum = $("#stock").val();
        if(num*1>pNum*1){
            layer.open({
                content: "库存不足!"
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            return;
        }
        pdata.productId = '${id!}';
        array[0]=pdata;
        window.location.href="${base!}/open/h5/order/orderConfirmation.html?productList="+encodeURIComponent(JSON.stringify(array));
    }
    //添加购物车
    function addCart() {
        var productNum = $("#productNum").val();
        if(productNum==null||productNum==undefined||productNum==""){
            productNum=1;
        }
        var pNum = $("#stock").val();
        if(productNum*1>pNum*1){
            layer.open({
                content: "库存不足!"
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            return;
        }
        $.ajax({
            type:"POST",
            url:"${base!}/open/h5/cart/addCart.html",
            dataType:"JSON",
            data:{
                productId:'${id!}',
                num:productNum
            },
            success:function(data){
                if (data.code == 0) {
                    layer.open({
                        content: "添加成功!"
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                } else if(data.code == -1){

                    layer.open({
                        content: '您没有登录，请登录！'
                        ,btn: '去登录',
                        end:function(){
                            window.location.href="${base!}/open/H5/login/login.html"
                        }
                    });
                }else {
                    layer.open({
                        content: "商品不存在!"
                        ,skin: 'msg'
                        ,time: 1 //2秒后自动关闭
                    });
                }
            }
        });
    }


</script>
</body>

</html>